import React, {useState} from 'react';
import {
  StyleSheet,
  Text,
  View,
  Button,
  Image,
  TextInput,
  Switch,
} from 'react-native';
const ChangePassword = ({navigation}) => {
  const [account, setAccount] = useState('');
  const [passWord, setPassWord] = useState('');
  const [passWord2, setPassWord2] = useState('');
  return (
    <View style={styles.container}>
      <View style={styles.title}>
        <Text style={styles.titleText}>更改密碼</Text>
      </View>
      <Text style={styles.accountLabel}>原密碼</Text>
      <View style={styles.account}>
        <TextInput
          style={styles.accountInput}
          onChangeText={text => setAccount(text)}
          value={account}
        />
      </View>
      <Text style={styles.accountLabel}>新密碼</Text>
      <View style={styles.account}>
        <TextInput
          style={styles.accountInput}
          onChangeText={text => setPassWord(text)}
          value={passWord}
        />
      </View>
      <Text style={styles.accountLabel}>確認密碼</Text>
      <View style={styles.account}>
        <TextInput
          style={styles.accountInput}
          onChangeText={text => setPassWord2(text)}
          value={passWord2}
        />
      </View>
      <View style={styles.buttons}>
        <View style={styles.register}>
          <Button
            title="取消"
            color="#999999"
            onPress={() => navigation.navigate('PurseScreen')}
          />
        </View>
        <View style={styles.ChangePassword}>
          <Button
            title="更改密碼"
            color="#FF9800"
            onPress={() => navigation.navigate('PurseScreen')}
          />
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    paddingLeft: 50,
    paddingRight: 50,
  },
  title: {
    height: 75,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  titleText: {
    color: '#17141a',
    fontWeight: 'bold',
    fontSize: 20,
  },
  accountLabel: {
    fontWeight: '800',
    marginTop: 10,
    lineHeight: 40,
    fontSize: 14,
    color: '#333',
  },
  account: {
    height: 35,
  },
  accountInput: {
    height: 35,
    borderColor: '#acacac',
    borderWidth: 1,
    backgroundColor: 'white',
  },
  remember: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    marginTop: 20,
  },
  buttons: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    marginTop: 50,
  },
  register: {
    width: 100,
    marginRight: 40,
  },
  ChangePassword: {
    width: 100,
  },
});

export default ChangePassword;
